<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Example using SVG syntax</title>
		<style>
		html, body, div {
			margin: 0;
			padding: 0;
			border: 0;
			width: 100%;
			height: 100%
		}

		svg {width:100%; height: 100%; border: 0}
		</style>
		<script src="../svg2vml.js"></script>
		
		<script>
			function debug(msg) {
				document.getElementById("debug").innerHTML += msg + "<br>";
			}
			
			function go() {
				var vectorModel = new VectorModel();
				var container = document.getElementById("content");
				var mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
				container.appendChild(mySvg);
				mySvg.setAttribute("version", "1.1");
				mySvg.setAttribute("viewBox","0 0 600 600");
				
				var myDefs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
				mySvg.appendChild( myDefs );

				var id0 = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
				id0.setAttribute("gradientUnits","userSpaceOnUse");
				id0.setAttribute("id", "id0");
				id0.setAttribute("x1", 300);
				id0.setAttribute("y1", 600);
				id0.setAttribute("x2", 300);
				id0.setAttribute("y2", 0);
				var stop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
				stop1.setAttribute('offset', "0");
				stop1.setAttribute('stop-color', "#63E8FF");
				id0.appendChild( stop1 );
				var stop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
				stop2.setAttribute('offset', "0.211765");
				stop2.setAttribute('stop-color', "#1EC4E1");
				id0.appendChild( stop2 );
				var stop3 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
				stop3.setAttribute('offset', "0.501961");
				stop3.setAttribute('stop-color', "#00B4D4");
				id0.appendChild( stop3 );
				var stop4 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
				stop4.setAttribute('offset', "0.788235");
				stop4.setAttribute('stop-color', "#008DA6");
				id0.appendChild( stop4 );
				var stop5 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
				stop5.setAttribute('offset', "1");
				stop5.setAttribute('stop-color', "#00414D");
				id0.appendChild( stop5 );
				
				mySvg.getElementsByTagName("defs")[0].appendChild( id0 );

				var id1 = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
				id1.setAttribute("gradientUnits","userSpaceOnUse");
				id1.setAttribute("id", "id1");
				id1.setAttribute("x1", 300);
				id1.setAttribute("y1", 410);
				id1.setAttribute("x2", 300);
				id1.setAttribute("y2", 189);
				var stop1_1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
				stop1_1.setAttribute('offset', "0");
				stop1_1.setAttribute('stop-color', "#4FE5FF");
				id1.appendChild( stop1_1 );
				var stop1_2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
				stop1_2.setAttribute('offset', "0.0901961");
				stop1_2.setAttribute('stop-color', "#00B4D4");
				id1.appendChild( stop1_2 );
				var stop1_3 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
				stop1_3.setAttribute('offset', "0.239216");
				stop1_3.setAttribute('stop-color', "#004754");
				id1.appendChild( stop1_3 );
				var stop1_4 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
				stop1_4.setAttribute('offset', "1");
				stop1_4.setAttribute('stop-color', "#002930"); //002930
				id1.appendChild( stop1_4 );
				
				mySvg.getElementsByTagName("defs")[0].appendChild( id1 );

				var id2 = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
				id2.setAttribute("gradientUnits","userSpaceOnUse");
				id2.setAttribute("id", "id2");
				id2.setAttribute("x1", 300);
				id2.setAttribute("y1", 319);
				id2.setAttribute("x2", 300);
				id2.setAttribute("y2", 199);
				var stop2_1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
				stop2_1.setAttribute('offset', "0");
				stop2_1.setAttribute('stop-color', "#5DB3C2");
				id2.appendChild( stop2_1 );
				var stop2_2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
				stop2_2.setAttribute('offset', "0.568627");
				stop2_2.setAttribute('stop-color', "#00B4D4");
				id2.appendChild( stop2_2 );
				var stop2_3 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
				stop2_3.setAttribute('offset', "1");
				stop2_3.setAttribute('stop-color', "#91EFFf");
				id2.appendChild( stop2_3 );
				
				mySvg.getElementsByTagName("defs")[0].appendChild( id2 );

				var myG = document.createElementNS("http://www.w3.org/2000/svg", "g");
				mySvg.appendChild(myG);
				
				var background = document.createElementNS("http://www.w3.org/2000/svg", "rect");
				background.setAttribute("id","background");
				background.setAttribute("x", 0);
				background.setAttribute("y", 0);
				background.setAttribute("width", "600");
				background.setAttribute("height", "600");
				background.setAttribute("fill","url(#id0)");
				myG.appendChild(background);

				var myG2 = document.createElementNS("http://www.w3.org/2000/svg", "g");
				myG2.setAttribute("id","node_outline");
				myG2.setAttribute("fill","#000000");
				

				var myG2Circle1 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG2Circle1.setAttribute("cx",521.638);
				myG2Circle1.setAttribute("cy",300);
				myG2Circle1.setAttribute("r",45.9027);
				myG2.appendChild(myG2Circle1);
				var myG2Circle2 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG2Circle2.setAttribute("cx",489.181);
				myG2Circle2.setAttribute("cy",221.639);
				myG2Circle2.setAttribute("r",45.9027);
				myG2.appendChild(myG2Circle2);
				var myG2Circle3 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG2Circle3.setAttribute("cx",410.818);
				myG2Circle3.setAttribute("cy",189.181);
				myG2Circle3.setAttribute("r",45.9027);
				myG2.appendChild(myG2Circle3);
				var myG2Circle4 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG2Circle4.setAttribute("cx",378.361);
				myG2Circle4.setAttribute("cy",110.82);
				myG2Circle4.setAttribute("r",45.9027);
				myG2.appendChild(myG2Circle4);
				var myG2Circle5 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG2Circle5.setAttribute("cx",300);
				myG2Circle5.setAttribute("cy",78.3614);
				myG2Circle5.setAttribute("r",45.9027);
				myG2.appendChild(myG2Circle5);
				var myG2Circle6 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG2Circle6.setAttribute("cx",221.639);
				myG2Circle6.setAttribute("cy",110.82);
				myG2Circle6.setAttribute("r",45.9027);
				myG2.appendChild(myG2Circle6);
				var myG2Circle7 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG2Circle7.setAttribute("cx",189.181);
				myG2Circle7.setAttribute("cy",189.181);
				myG2Circle7.setAttribute("r",45.9027);
				myG2.appendChild(myG2Circle7);
				var myG2Circle8 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG2Circle8.setAttribute("cx",110.82);
				myG2Circle8.setAttribute("cy",221.639);
				myG2Circle8.setAttribute("r",45.9027);
				myG2.appendChild(myG2Circle8);
				var myG2Circle9 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG2Circle9.setAttribute("cx",78.3618);
				myG2Circle9.setAttribute("cy",300);
				myG2Circle9.setAttribute("r",45.9027);
				myG2.appendChild(myG2Circle9);
				var myG2Circle10 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG2Circle10.setAttribute("cx",110.819);
				myG2Circle10.setAttribute("cy",378.363);
				myG2Circle10.setAttribute("r",45.9027);
				myG2.appendChild(myG2Circle10);
				var myG2Circle11 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG2Circle11.setAttribute("cx",189.18);
				myG2Circle11.setAttribute("cy",410.819);
				myG2Circle11.setAttribute("r",45.9027);
				myG2.appendChild(myG2Circle11);
				var myG2Circle12 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG2Circle12.setAttribute("cx",221.639);
				myG2Circle12.setAttribute("cy",489.18);
				myG2Circle12.setAttribute("r",45.9027);
				myG2.appendChild(myG2Circle12);
				var myG2Circle13 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG2Circle13.setAttribute("cx",300);
				myG2Circle13.setAttribute("cy",521.639);
				myG2Circle13.setAttribute("r",45.9027);
				myG2.appendChild(myG2Circle13);
				var myG2Circle14 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG2Circle14.setAttribute("cx",378.361);
				myG2Circle14.setAttribute("cy",489.18);
				myG2Circle14.setAttribute("r",45.9027);
				myG2.appendChild(myG2Circle14);
				var myG2Circle15 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG2Circle15.setAttribute("cx",410.819);
				myG2Circle15.setAttribute("cy",410.82);
				myG2Circle15.setAttribute("r",45.9027);
				myG2.appendChild(myG2Circle15);
				var myG2Circle16 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG2Circle16.setAttribute("cx",489.181);
				myG2Circle16.setAttribute("cy",378.361);
				myG2Circle16.setAttribute("r",45.9027);
				myG2.appendChild(myG2Circle16);

				var myG2Rect1 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
				myG2Rect1.setAttribute("x", 200);
				myG2Rect1.setAttribute("y", 100);
				myG2Rect1.setAttribute("width", "200");
				myG2Rect1.setAttribute("height", "400");
				myG2.appendChild(myG2Rect1);
				var myG2Rect2 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
				myG2Rect2.setAttribute("x", 100);
				myG2Rect2.setAttribute("y", 200);
				myG2Rect2.setAttribute("width", "400");
				myG2Rect2.setAttribute("height", "200");
				myG2.appendChild(myG2Rect2);
				myG.appendChild(myG2);

				var myG3 = document.createElementNS("http://www.w3.org/2000/svg", "g");
				myG3.setAttribute("id","nodes");
				myG3.setAttribute("fill","#ffffff");

				var myG3Circle1 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG3Circle1.setAttribute("cx",521.638);
				myG3Circle1.setAttribute("cy",300);
				myG3Circle1.setAttribute("r",24.848);
				myG3.appendChild(myG3Circle1);
				var myG3Circle2 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG3Circle2.setAttribute("cx",489.181);
				myG3Circle2.setAttribute("cy",221.639);
				myG3Circle2.setAttribute("r",24.848);
				myG3.appendChild(myG3Circle2);
				var myG3Circle3 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG3Circle3.setAttribute("cx",410.818);
				myG3Circle3.setAttribute("cy",189.181);
				myG3Circle3.setAttribute("r",24.848);
				myG3.appendChild(myG3Circle3);
				var myG3Circle4 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG3Circle4.setAttribute("cx",378.361);
				myG3Circle4.setAttribute("cy",110.82);
				myG3Circle4.setAttribute("r",24.848);
				myG3.appendChild(myG3Circle4);
				var myG3Circle5 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG3Circle5.setAttribute("cx",300);
				myG3Circle5.setAttribute("cy",78.3614);
				myG3Circle5.setAttribute("r",24.848);
				myG3.appendChild(myG3Circle5);
				var myG3Circle6 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG3Circle6.setAttribute("cx",221.639);
				myG3Circle6.setAttribute("cy",110.82);
				myG3Circle6.setAttribute("r",24.848);
				myG3.appendChild(myG3Circle6);
				var myG3Circle7 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG3Circle7.setAttribute("cx",189.181);
				myG3Circle7.setAttribute("cy",189.181);
				myG3Circle7.setAttribute("r",24.848);
				myG3.appendChild(myG3Circle7);
				var myG3Circle8 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG3Circle8.setAttribute("cx",110.82);
				myG3Circle8.setAttribute("cy",221.639);
				myG3Circle8.setAttribute("r",24.848);
				myG3.appendChild(myG3Circle8);
				var myG3Circle9 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG3Circle9.setAttribute("cx",78.3618);
				myG3Circle9.setAttribute("cy",300);
				myG3Circle9.setAttribute("r",24.848);
				myG3.appendChild(myG3Circle9);
				var myG3Circle10 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG3Circle10.setAttribute("cx",110.819);
				myG3Circle10.setAttribute("cy",378.363);
				myG3Circle10.setAttribute("r",24.848);
				myG3.appendChild(myG3Circle10);
				var myG3Circle11 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG3Circle11.setAttribute("cx",189.18);
				myG3Circle11.setAttribute("cy",410.819);
				myG3Circle11.setAttribute("r",24.848);
				myG3.appendChild(myG3Circle11);
				var myG3Circle12 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG3Circle12.setAttribute("cx",221.639);
				myG3Circle12.setAttribute("cy",489.18);
				myG3Circle12.setAttribute("r",24.848);
				myG3.appendChild(myG3Circle12);
				var myG3Circle13 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG3Circle13.setAttribute("cx",300);
				myG3Circle13.setAttribute("cy",521.639);
				myG3Circle13.setAttribute("r",24.848);
				myG3.appendChild(myG3Circle13);
				var myG3Circle14 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG3Circle14.setAttribute("cx",378.361);
				myG3Circle14.setAttribute("cy",489.18);
				myG3Circle14.setAttribute("r",24.848);
				myG3.appendChild(myG3Circle14);
				var myG3Circle15 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG3Circle15.setAttribute("cx",410.819);
				myG3Circle15.setAttribute("cy",410.82);
				myG3Circle15.setAttribute("r",24.848);
				myG3.appendChild(myG3Circle15);
				var myG3Circle16 = document.createElementNS("http://www.w3.org/2000/svg","circle");
				myG3Circle16.setAttribute("cx",489.181);
				myG3Circle16.setAttribute("cy",378.361);
				myG3Circle16.setAttribute("r",24.848);
				myG3.appendChild(myG3Circle16);
				myG.appendChild(myG3);

				var myG4 = document.createElementNS("http://www.w3.org/2000/svg", "g");
				myG4.setAttribute("id","connectors");
				myG4.setAttribute("fill","none");
				myG4.setAttribute("stroke","white");
				myG4.setAttribute("stroke-width",35.1378);
				var line1 = document.createElementNS("http://www.w3.org/2000/svg", "line");
				line1.setAttribute("x1",221.639);
				line1.setAttribute("y1",110.819);
				line1.setAttribute("x2",489.181);
				line1.setAttribute("y2",378.361);
				myG4.appendChild(line1);
				var line2 = document.createElementNS("http://www.w3.org/2000/svg", "line");
				line2.setAttribute("x1",189.181);
				line2.setAttribute("y1",189.181);
				line2.setAttribute("x2",410.819);
				line2.setAttribute("y2",189.181);
				myG4.appendChild(line2);
				var line3 = document.createElementNS("http://www.w3.org/2000/svg", "line");
				line3.setAttribute("x1",110.819);
				line3.setAttribute("y1",378.361);
				line3.setAttribute("x2",378.361);
				line3.setAttribute("y2",110.819);
				myG4.appendChild(line3);
				var line4 = document.createElementNS("http://www.w3.org/2000/svg", "line");
				line4.setAttribute("x1",189.181);
				line4.setAttribute("y1",410.819);
				line4.setAttribute("x2",189.181);
				line4.setAttribute("y2",189.181);
				myG4.appendChild(line4);
				var line5 = document.createElementNS("http://www.w3.org/2000/svg", "line");
				line5.setAttribute("x1",300);
				line5.setAttribute("y1",521.637);
				line5.setAttribute("x2",300);
				line5.setAttribute("y2",78.3614);
				myG4.appendChild(line5);
				var line6 = document.createElementNS("http://www.w3.org/2000/svg", "line");
				line6.setAttribute("x1",378.363);
				line6.setAttribute("y1",489.18);
				line6.setAttribute("x2",110.82);
				line6.setAttribute("y2",221.639);
				myG4.appendChild(line6);
				var line7 = document.createElementNS("http://www.w3.org/2000/svg", "line");
				line7.setAttribute("x1",410.82);
				line7.setAttribute("y1",410.819);
				line7.setAttribute("x2",189.182);
				line7.setAttribute("y2",410.819);
				myG4.appendChild(line7);
				var line8 = document.createElementNS("http://www.w3.org/2000/svg", "line");
				line8.setAttribute("x1",521.639);
				line8.setAttribute("y1",300);
				line8.setAttribute("x2",78.3626);
				line8.setAttribute("y2",300);
				myG4.appendChild(line8);
				var line9 = document.createElementNS("http://www.w3.org/2000/svg", "line");
				line9.setAttribute("x1",489.181);
				line9.setAttribute("y1",221.639);
				line9.setAttribute("x2",221.64);
				line9.setAttribute("y2",489.18);
				myG4.appendChild(line9);
				var line10 = document.createElementNS("http://www.w3.org/2000/svg", "line");
				line10.setAttribute("x1",410.82);
				line10.setAttribute("y1",189.18);
				line10.setAttribute("x2",410.82);
				line10.setAttribute("y2",410.818);
				myG4.appendChild(line10);
				myG.appendChild(myG4);

				var myGrect2 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
				myGrect2.setAttribute("x", 189.189);
				myGrect2.setAttribute("y", 189.181);
				myGrect2.setAttribute("width", "221.631");
				myGrect2.setAttribute("height", "221.639");
				myGrect2.setAttribute("fill","url(#id1)");
				myG.appendChild(myGrect2);

				var myGpath1 = document.createElementNS("http://www.w3.org/2000/svg","path");
				myGpath1.setAttribute("fill","url(#id2)");
				myGpath1.setAttribute("d","M212.548 199.109l174.905 0c7.16693,0 13.0193,5.86181 13.0193,13.0193l0 107.542c-67.5945,-8.3622 -134.608,-41.25 -200.943,-40.1811l0 -67.3606c0,-7.16575 5.85236,-13.0193 13.0193,-13.0193z");
				myG.appendChild(myGpath1);

				var myG5 = document.createElementNS("http://www.w3.org/2000/svg", "g");
				myG5.setAttribute("id","SVG");
				myG5.setAttribute("fill","#ffffff");

				var myG5path1 = document.createElementNS("http://www.w3.org/2000/svg","path");
				myG5path1.setAttribute("id","S");
				myG5path1.setAttribute("d","M219.402 301.214c-5.38819,-5.38819 -8.72126,-12.8315 -8.72126,-21.0508 0,-16.4409 13.3323,-29.7732 29.772,-29.7732 16.4398,0 29.772,13.3323 29.772,29.7732l-17.4402 0c0,-6.81024 -5.52283,-12.3331 -12.3319,-12.3331 -6.81024,0 -12.3319,5.52283 -12.3319,12.3331 0,3.40157 1.37717,6.48189 3.60591,8.71299l0.00590551 0c2.2311,2.23346 5.31378,3.61417 8.72008,3.61417l0 0.00472441c8.21929,0 15.6614,3.33425 21.0496,8.72244l0.0011811 -0.0011811c5.38819,5.38819 8.72126,12.8315 8.72126,21.052 0,16.4398 -13.3323,29.7732 -29.772,29.7732 -16.4398,0 -29.772,-13.3335 -29.772,-29.7732l17.4402 0c0,6.80906 5.52165,12.3319 12.3319,12.3319 6.80906,0 12.3319,-5.52283 12.3319,-12.3319 0,-3.40157 -1.37835,-6.48189 -3.60591,-8.71417l-0.00590551 0c-2.23228,-2.23228 -5.31496,-3.61417 -8.72008,-3.61417l0 -0.00472441c-8.22047,0 -15.6626,-3.33307 -21.0508,-8.72126l0 0z");
				myG5.appendChild(myG5path1);

				var myG5poly1 = document.createElementNS("http://www.w3.org/2000/svg","polygon");
				myG5poly1.setAttribute("id","V");
				myG5poly1.setAttribute("points","329.767,250.39 308.715,352.042 291.275,352.042 270.224,250.39 287.668,250.39 299.995,309.927 312.324,250.39");
				myG5.appendChild(myG5poly1);
				
   				var myG5path2 = document.createElementNS("http://www.w3.org/2000/svg","path");
				myG5path2.setAttribute("id","G");
				myG5path2.setAttribute("d","M359.544 292.498l29.772 0 0 29.7685 0.00354331 0c0,16.4409 -13.3323,29.7756 -29.7732,29.7744 -16.4409,0.0011811 -29.7732,-13.3323 -29.7744,-29.772l0 -0.0023622 0 -42.1016 -0.00472441 0c0,-16.4409 13.3335,-29.7744 29.7744,-29.7744 16.4409,0 29.7744,13.3335 29.7744,29.7744l-17.4449 0c0,-6.80669 -5.52047,-12.3272 -12.3272,-12.3272 -6.80787,0 -12.3283,5.52047 -12.3283,12.3272l0 42.1039 0 0c0.0011811,6.80669 5.52165,12.326 12.3283,12.326 6.80551,0 12.3248,-5.51811 12.3272,-12.3236l0 -0.00472441 0 -12.3236 -12.3272 0 0 -17.4449z");
				myG5.appendChild(myG5path2);
     				myG.appendChild(myG5);

			}
		</script>

	</head>
	<body onload="go();" id="body">
		<div id="content"></div>
		<div id="debug" style="position:absolute; top:250px;"></div>
	</body>
</html>
